<script setup>
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import {onMounted, ref} from 'vue'
echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout]);

var option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '水产养殖',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '草鱼' },
        { value: 735, name: '罗非鱼' },
        { value: 580, name: '鲢鱼' },
        { value: 484, name: '鲈鱼' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

const MyChart = ref(null)
onMounted(()=>{
  var myChart= echarts.init(MyChart.value)
  myChart.setOption(option)
})
</script>
<template>
  <div ref="MyChart"></div>
</template>
<style scoped>
  div{
    width: 22vw;
    height: 22vh;
  }
</style>